import React, { Component } from 'react'
// import Pubsub from 'pubsub-js'
import './Footer.css'
export default class Footer extends Component {
  // 全选按钮的事件处理函数
  // handle = (e) => {
  //   // console.log()
  //   this.props.getTodoIsDone()
  // }
  render() {
    // 根据app传入的todoList数据,动态计算数据总数和完成总数
    const { todos } = this.props
    // 总共有多少数据
    const allTotal = todos.length
    // 完成的数据总共有多少
    const doneTotal = todos.filter((item) => item.isDone).length

    return (
      <div className="todo-footer">
        <label>
          {/* 如果已完成项的个数和数据总数相同,则认为都选中.全选也选中 */}
          <input
            type="checkbox"
            checked={allTotal === doneTotal}
            // 由于这次不需要给App传递数据,所以直接将App的函数,当做全选的事件处理函数
            onChange={this.props.getTodoIsDone}
          />
        </label>
        <span>
          <span>已完成 {doneTotal}</span> / 全部 {allTotal}
        </span>
        <button className="btn btn-danger" onClick={this.props.clearAllDone}>清除已完成任务</button>
      </div>
    )
  }
}
